<template>
  <div class="playbar-container">
      <div 
        class="play-bar " 
        :class="[playbarSwitch, playbarLoock]"
        @mouseover="playBarMover" 
        @mouseout="playBarMout" 
        ref="playBar"
    >
            <div class="updn">
                <div class="left f-fl"><a href="javascript:;" class="btn" hidefocus="true" @click="toggleLoock"></a></div>
                <div class="right f-fl"></div>
            </div>
            <div class="bar-bg"></div>
            
            <div id="music" class="player">

                <div class="oper f-fl">
                    <a href="javascript:;" hidefocus="true" data-action="like" class="icn icn-add j-flag" title="收藏">收藏</a>
                    <a href="javascript:;" hidefocus="true" data-action="share" class="icn icn-share" title="分享">分享</a>
                </div>
            </div>

            <PlayList v-if="hasPlayList" @on-close="hasPlayList = false"></PlayList>
      </div>
  </div>
</template>

<script>
import Music from '@/libs/player';
import PlayList from './play-list.vue';
import util from '@/utils/util';
import { mapState, mapMutations } from 'vuex';

let timeOut = null;

export default {
  name: 'PlayBar',

  data(){
        return {
            hasPlaybar: true,
            hasLoock: true,
            hasPlayList: false
        }
  },

  computed: {
      ...mapState([
          'playerList',
          'currentPlayIndex'
      ]),
      playbarSwitch(){
          return this.hasPlaybar ? 'playbar-show' : 'playbar-hide';
      },
      playbarLoock(){
          return this.hasLoock ? 'playbar-loock' : 'playbar-unloock';
      }
  },

  components: {
    PlayList
  },

  mounted(){
    /** 初始化播放器 */
    GLOBAL.vbus.$music = this.initMusic();
    /** 把播放器实例，挂载到当前组件 */
    this.$music = GLOBAL.vbus.$music;
    /** 绑定事件 */
    this.bindEvent();

    this.$store.dispatch('getDetailPlayList', {id: 639493467}).then(() => {
        return this.$store.dispatch('getPlayUrl', {id: this.playerList[0].id})
    }).then( () => {
        this.$music.src = this.$music.list[this.currentPlayIndex].src; 
        this.$music.emit('change', this.$music.list[this.currentPlayIndex]);
    })

  },
  
  methods: {
      ...mapMutations([
          'setCurrentPlayIndex'
      ]),
      initMusic(){
        return new Music({
            id: 'music',
            url: this.playerList,
            volume: 0.1,
            width: 980,
            height: 47,
            preloadNext: false,
            ignores: ['forward', 'backward'],
            nextBtn: {
                type: 'img',
                url: require('Assets/images/playbar.png'),
                width: '28px',
                height: '28px'
            },
            playBtn: {
                type: 'img',
                url: {
                    play: require('Assets/images/playbar.png'),
                    pause: require('Assets/images/playbar.png')
                },
                width: '36px',
                height: '36px'
            },
            prevBtn: {
                type: 'img',
                url: require('Assets/images/playbar.png'),
                width: '28px',
                height: '28px'
            },
            togglePlayFunc: trackItem => this.$store.dispatch('getPlayUrl', {id: `${trackItem.vid}`}), // 该方法用于在 player 切换歌曲的时候，得到真正音乐链接
        });
      },
      bindEvent(){
        this.$music.on('clickList', this.togglePlayList);
        this.$music.on('toggleChange', this.togglePlay);
      },
      playBarMover(e){
        clearInterval(timeOut);
        this.hasPlaybar = true;
      },
      playBarMout(e){
        clearInterval(timeOut);
        timeOut = setTimeout(() => {
            if(!this.hasLoock){
                this.hasPlaybar = false
            }
        }, 1000);
      },
      toggleLoock(){
        this.hasLoock = !this.hasLoock;
      },
      togglePlayList(){
        this.hasPlayList = !this.hasPlayList;
      },
      /**
       * 播放器切换歌曲触发事件-把切歌后的 索引同步到 vuex
       */
      togglePlay(trackIndex){
        this.currentPlayIndex !== trackIndex ? this.$store.commit('changeCurrentPlayIndex', trackIndex) : '';
      }
  },
}
</script>
<style scoped="true" lang="scss" >
    @import '../../../assets/style/xgplayer/music.css';

    .playbar-container{
        position: fixed;
        zoom: 1;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        width: 100%;
        z-index: 1002;
    }
    
    .play-bar{
        position: absolute;
        zoom: 1;
        left: 0;
        width: 100%;
        height: 53px;
        margin: 0 auto;
        transition: .2555s top linear;

        &.playbar-show{
            top: -53px;
        }
        &.playbar-hide{
            top: -7px;
        }

        &.playbar-loock{

            .updn .btn{
                background-position: -100px -380px;

                &:hover {
                    background-position: -100px -400px;
                }
            }
        }

        &.playbar-unloock{
            .updn .btn{
                background-position: -80px -380px;

                &:hover {
                    background-position: -80px -400px;
                }
            }
        }

        .bar-bg{
            height: 53px;
            zoom: 1;
            margin-right: 67px;
            background-position: 0 0;
            background-repeat: repeat-x;
        }

        .player{
            position: absolute;
            left: 0;
            right: 0;
            top: 6px;
            z-index: 15;
            width: 980px;
            height: 47px;
            margin: 0 auto;
        }

        .icn {
            float: left;
            width: 25px;
            height: 25px;
            margin: 11px 2px 0 0;
            text-indent: -9999px;
        }

        .oper {
            width: 60px;
            height: 100%;
            float: right;
            position: relative;
            z-index: 11;
            padding-left: 13px;
            background-position: -140px -240px;
        }

        .icn-add {
            background-position: -88px -163px;
        }

        .icn-share {
            background-position: -114px -163px;
        }

    }

</style>
